import React, { useEffect } from 'react';
import style from './index.less';
import { message, Spin, Button, Checkbox, Input } from 'antd';
import { connect } from 'dva';
import { useTRState } from '@/utils';
import { HttpCode } from '@/utils/contacts';
import { personPageGroup } from '@/services/eam';

function FilterColumnDropdown({ id, currentUser, handleFilter, confirm }) {
  const [state, setState] = useTRState({
    loading: false,
    checkList: [],
    list: [],
    showList: [],
    searchValue: '',
  });

  useEffect(() => {
    if (id === 'three') {
      let arr = [
        { label: '负责人', value: 'PRINCIPAL' },
        { label: '签发人', value: 'SIGNER' },
        { label: '许可人', value: 'LICENSOR' },
      ];
      setState({
        list: arr,
        showList: arr,
      });
    } else {
      getList();
    }
  }, []);

  const getList = async () => {
    setState({ loading: true });

    let res = await personPageGroup({
      deptIds: [],
      deptNums: [],
      personPowers: [],
      userId: currentUser?.personId || '',
    });
    if (res?.statusCode === HttpCode.SUCCESS) {
      let data =
        res?.data.map((n) => {
          return { label: id === 'deptName' ? n.deptName : n.deptNum, value: n.deptId };
        }) || [];
      setState({
        list: data,
        showList: data,
      });
    } else {
      message.error(res?.message || '请求失败');
    }

    setState({ loading: false });
  };

  const onSubmit = () => {
    confirm?.();
    let arr = state.checkList;
    if (arr.includes('LICENSOR')) {
      arr.push('LOCALE_LICENSOR');
    }
    handleFilter?.(id, state.checkList);
  };

  const checkAll = (flag) => {
    setState({
      checkList: flag ? state.list?.map((n) => n.value) : [],
    });
  };

  const handleCheck = (flag, value) => {
    setState({
      checkList: flag ? [...state.checkList, value] : state.checkList.filter((n) => n !== value),
    });
  };

  const handleSearch = (value) => {
    setState({
      showList: state.list.filter((n) => n.label.includes(value)),
    });
  };

  return (
    <Spin spinning={state.loading}>
      <div className={style.filterColumnDropdown}>
        <div className={style.top}>
          <Input.Search
            onChange={(e) => setState({ searchValue: e.target.value })}
            value={state.searchValue}
            allowClear
            onSearch={handleSearch}
          />

          {/*<div>*/}
          {/*  <Checkbox*/}
          {/*    checked={state.checkList.length === state.list.length}*/}
          {/*    className={style.filterDropItem_checkbox}*/}
          {/*    onChange={(e) => checkAll(e.target.checked)}*/}
          {/*  />*/}
          {/*  全选*/}
          {/*</div>*/}
          {/*<div style={{ cursor: 'pointer' }} onClick={() => setState({ checkList: [] })}>*/}
          {/*  重置*/}
          {/*</div>*/}
        </div>
        <div className={style.filterColumnDropdown_content}>
          {state.showList?.map((item, index) => {
            return (
              <div className={style.filterDropItem} key={index}>
                <Checkbox
                  checked={state.checkList.includes(item.value)}
                  className={style.filterDropItem_checkbox}
                  onChange={(e) => handleCheck(e.target.checked, item.value)}
                />
                <div className={style.filterDropItem_title}>{item.label}</div>
              </div>
            );
          })}
        </div>
        <div className={style.btnBox}>
          <Button
            className={style.btn}
            onClick={() => setState({ checkList: [], searchValue: '', showList: state.list })}
          >
            重置
          </Button>
          <Button type="primary" className={style.btn} onClick={onSubmit}>
            确定
          </Button>
        </div>
      </div>
    </Spin>
  );
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(FilterColumnDropdown);
